<template>
  <div class="report-wrap">
    <div class="report-title">
      <h1>{{ dateTitle }}份伙食费领报申请表</h1>
    </div>
    <div class="report-deputy-title">
      <div>
        <span>编报单位:</span>
        <span>{{ reportingUnit }}</span>
      </div>
      <div>
        <span>伙食费地区:</span>
        <Select v-model="region">
          <Option value="1">一般地区</Option>
          <Option value="2">特殊地区</Option>
        </Select>
      </div>
      <div>
        <span>填报时间:</span>
        <span>{{ createTime }}</span>
      </div>
    </div>
    <div class="report-table-content">
      <table
        border="1"
        style="border-collapse:collapse;text-align: center;width:30%"
      >
        <thead>
          <tr>
            <th colspan="3" rowspan="3" style="width:180px;height: 60px;">
              项目
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(item, indexS) in tableOption"
            :key="indexS"
            style="height: 40px;"
          >
            <td
              :colspan="items.colspan"
              :rowspan="items.rowspan"
              v-for="(items, indexA) in item"
              :key="indexA"
            >
              <Input
                v-if="items.render == 'input'"
                v-model="items.value"
                class="inputNumberWidth"
              />
              <span v-else>{{ items.value }}</span>
            </td>
          </tr>
        </tbody>
      </table>
      <table
        border="1"
        style="border-collapse:collapse;width: 70%;text-align: center;"
      >
        <thead>
          <tr>
            <th colspan="3" rowspan="1" style="width: 300px;height: 20px;">
              义务兵和供给制学员
            </th>
            <th colspan="3" rowspan="1" style="width: 300px">
              其他享受伙食费人员
            </th>
            <th colspan="1" rowspan="3" style="width: 100px">
              申报金额合计（元）
            </th>
          </tr>
          <tr>
            <th style="width: 100px;height: 20px;">标准</th>
            <th style="width: 100px">实力</th>
            <th colspan="1" rowspan="2" style="width: 100px">金额(元)</th>
            <th style="width: 100px">标准</th>
            <th style="width: 100px">实力</th>
            <th colspan="1" rowspan="2" style="width: 100px">金额(元)</th>
          </tr>
          <tr>
            <th colspan="1" rowspan="3" style="width: 100px;height: 20px;">
              (元/天)
            </th>
            <th colspan="1" style="width: 100px">(人天)</th>
            <th colspan="1" rowspan="3" style="width: 100px">(元/天)</th>
            <th colspan="1" style="width: 100px">(人天)</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(items, indexs) in dataOption" :key="indexs">
            <td>
              <div class="tableInput">
                <Input-number
                  v-model="items.volunteerAndSupplyStandard"
                  class="inputNumberWidth"
                  @on-change="changeInput"
                  :precision="2"
                  :active-change="false"
                  :min="0"
                ></Input-number>
              </div>
            </td>
            <td>
              <div class="tableInput">
                <Input-number
                  v-model="items.volunteerAndSupplyStrength"
                  @on-change="changeInput"
                  :precision="0"
                  :min="0"
                  class="inputNumberWidth"
                ></Input-number>
              </div>
            </td>
            <td style="height: 40px;">
              <span>{{
                (
                  items.volunteerAndSupplyStandard *
                  items.volunteerAndSupplyStrength
                ).toFixed(2)
              }}</span>
            </td>
            <td>
              <div class="tableInput">
                <Input-number
                  v-model="items.otherPersonnelEnjoyingMealStandard"
                  class="inputNumberWidth"
                  @on-change="changeInput"
                  :active-change="false"
                  :precision="2"
                  :min="0"
                ></Input-number>
              </div>
            </td>
            <td>
              <div class="tableInput">
                <Input-number
                  v-model="items.otherPersonnelEnjoyingMealStrength"
                  class="inputNumberWidth"
                  @on-change="changeInput"
                  :precision="0"
                  :min="0"
                ></Input-number>
              </div>
            </td>
            <td style="height: 40px;">
              <span>{{
                (
                  items.otherPersonnelEnjoyingMealStandard *
                  items.otherPersonnelEnjoyingMealStrength
                ).toFixed(2)
              }}</span>
            </td>
            <td style="height: 40px;">
              <span>{{
                (
                  items.volunteerAndSupplyStandard *
                    items.volunteerAndSupplyStrength +
                  items.otherPersonnelEnjoyingMealStandard *
                    items.otherPersonnelEnjoyingMealStrength
                ).toFixed(2)
              }}</span>
            </td>
          </tr>
          <tr style="height: 41px;">
            <td colspan="6" rowspan="1" style="height: 41px;"></td>
            <td>
              <div class="tableInput">
                <span class="totalAmount" style="height: 41px">{{
                  totleAmount
                }}</span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="report-table-footer">
      <Form v-model="auditForm" :label-width="120">
        <FormItem label="账务部位复核:">
          <Input v-model="auditForm.financeDepartmentReviewer" />
        </FormItem>
        <FormItem label="军需部门审核:">
          <Input v-model="auditForm.militarySuppliesDepartmentReviewer" />
        </FormItem>
        <FormItem label="基层单位领导:">
          <Input v-model="auditForm.basicLevelLeaderShip" />
        </FormItem>
        <FormItem label="司务长:">
          <Input v-model="auditForm.messOfficer" />
        </FormItem>
        <FormItem label="填制:">
          <Input v-model="auditForm.informant" />
        </FormItem>
      </Form>
    </div>
  </div>
</template>
<script>
import {
  saveMealsApply,
  reportMonthMealApply
} from "@/api/businessAccountingApi/essentialInformationApi";
export default {
  props: {
    reportOption: {
      type: Object,
      default: () => {}
    },
    dateSelect: {
      type: Date
    }
  },
  data() {
    return {
      dataOption: [],
      tableOption: [
        [
          { value: "基本伙食费", colspan: 1, rowspan: 3 },
          { value: "一类灶", colspan: 2, rowspan: 1 }
        ],
        [{ value: "二类灶", colspan: 2, rowspan: 1 }],
        [{ value: "三类灶", colspan: 2, rowspan: 1 }],
        [
          { value: "任务专项伙食费", colspan: 1, rowspan: 9 },
          { value: "重大任务(一、二类灶)", colspan: 2, rowspan: 1 }
        ],
        [{ value: "一般任务一类灶", colspan: 2, rowspan: 1 }],
        [{ value: "军委、战区联指值班", colspan: 2, rowspan: 1 }],
        [{ value: "火箭军密闭训练", colspan: 2, rowspan: 1 }],
        [
          {
            value: "舰艇(船)赴国(境)外执行任务需筹措补给",
            colspan: 2,
            rowspan: 1
          }
        ],
        [{ value: "舰艇护航", colspan: 2, rowspan: 1 }],
        [{ value: "远望船执行远洋测控", colspan: 2, rowspan: 1 }],
        [{ value: "边境巡逻(当天返回)", colspan: 2, rowspan: 1 }],
        [{ value: "边境巡逻(当天不返回)", colspan: 2, rowspan: 1 }],
        [
          { value: "地区专项伙食费", colspan: 1, rowspan: 9 },
          { value: "海拔4500米以上(一类灶)", colspan: 2, rowspan: 1 }
        ],
        [{ value: "海拔4500米以上(二类灶)", colspan: 2, rowspan: 1 }],
        [{ value: "海拔4500米以上(三类灶)", colspan: 2, rowspan: 1 }],
        [{ value: "西沙群岛(一类灶)", colspan: 2, rowspan: 1 }],
        [{ value: "西沙群岛(二类灶)", colspan: 2, rowspan: 1 }],
        [{ value: "西沙群岛(三类灶)", colspan: 2, rowspan: 1 }],
        [{ value: "南沙岛礁人员", colspan: 2, rowspan: 1 }],
        [{ value: "南沙值班舰艇", colspan: 2, rowspan: 1 }],
        [{ value: "吉布提基地", colspan: 2, rowspan: 1 }],
        [
          { value: "人员专项伙食费", colspan: 1, rowspan: 9 },
          { value: "一线边防连队和海岛分队", colspan: 2, rowspan: 1 }
        ],
        [{ value: "核材料运输、技务、守护分队", colspan: 2, rowspan: 1 }],
        [{ value: "驻核试验区分队和参试人员", colspan: 2, rowspan: 1 }],
        [{ value: "核潜艇修理人员", colspan: 2, rowspan: 1 }],
        [{ value: "20人以下独立起伙人员", colspan: 2, rowspan: 1 }],
        [{ value: "飞行日进场保障机务人员", colspan: 2, rowspan: 1 }],
        [{ value: "空降兵部队跳伞人员", colspan: 2, rowspan: 1 }],
        [{ value: "核潜艇艇员", colspan: 2, rowspan: 1 }],
        [{ value: "航空母舰舰员", colspan: 2, rowspan: 1 }],
        [
          { value: "人员专项伙食费", colspan: 1, rowspan: 5 },
          { value: "航空母舰飞行员和潜水员", colspan: 2, rowspan: 1 }
        ],
        [{ value: "航天员", colspan: 2, rowspan: 1 }],
        [{ value: "运动员、教练员、试训运动员", colspan: 2, rowspan: 1 }],
        [{ value: "疗养员", colspan: 2, rowspan: 1 }],
        [{ value: "伤病员", colspan: 2, rowspan: 1 }],
        [
          { value: "夜餐费", colspan: 1, rowspan: 2 },
          { value: "固定夜餐岗位", colspan: 2, rowspan: 1 }
        ],
        [{ value: "任务夜餐费", colspan: 2, rowspan: 1 }],
        [
          { value: "高原临时来队", colspan: 1, rowspan: 2 },
          { value: "临时来队人员加菜就餐", colspan: 2, rowspan: 1 }
        ],
        [{ value: "临时来队人员食堂就餐", colspan: 2, rowspan: 1 }],
        [
          { value: "客饭费", colspan: 1, rowspan: 2 },
          { colspan: 2, rowspan: 1, render: "input", value: "" }
        ],
        [{ colspan: 2, rowspan: 1, render: "input", value: "" }],
        [{ value: "过    节    费", colspan: 3, rowspan: 1 }],
        [{ value: "新兵入伍途中伙食补助", colspan: 3, rowspan: 1 }],
        [{ value: "其      他", colspan: 3, rowspan: 1 }],
        [
          { value: "退伙", colspan: 1, rowspan: 9 },
          { value: "义务兵、供给制学员", colspan: 1, rowspan: 3 },
          { value: "一类灶" }
        ],
        [{ value: "二类灶" }],
        [{ value: "三类灶" }],
        [{ value: "同餐人员", colspan: 1, rowspan: 3 }, { value: "一类灶" }],
        [{ value: "二类灶" }],
        [{ value: "三类灶" }],
        [{ value: "伤病员", colspan: 1, rowspan: 2 }, { value: "义务兵" }],
        [{ value: "其他人员" }],
        [{ value: "航天员", colspan: 2, rowspan: 1 }],
        [{ value: "合   计", colspan: 3, rowspan: 1 }]
      ],
      auditForm: {
        financeDepartmentReviewer: "",
        militarySuppliesDepartmentReviewer: "",
        basicLevelLeaderShip: "",
        messOfficer: "",
        informant: ""
      },
      reportingUnit: "",
      createTime: new Date().Format("yyyy-MM-dd"),
      region: "1",
      totleAmount: 0
    };
  },
  watch: {
    reportOption: {  
      handler: function() {
        setTimeout(() => {
          console.log(this.reportOption,'监听的数据');
        let Obj = {
          volunteerAndSupplyStandard: 0,
          volunteerAndSupplyStrength: 0,
          otherPersonnelEnjoyingMealStandard: 0,
          otherPersonnelEnjoyingMealStrength: 0
        }; 
        this.dataOption = [];
        if (
          !this.reportOption.basMealExpensesStandardList ||
          this.reportOption.basMealExpensesStandardList.length == 0
        ) {
          this.reportOption.basMealExpensesStandardList = [];
          for (var i = 0; i < 53; i++) {
            this.reportOption.basMealExpensesStandardList.push(
              JSON.parse(JSON.stringify(Obj))
            );
          }
        }
        this.reportOption.basMealExpensesStandardList.forEach(item => {
          this.dataOption.push(item);
        });
        this.tableOption[39][1].value = this.reportOption.cateringFieldOne;
        this.tableOption[40][0].value = this.reportOption.cateringFieldTwo;
        this.auditForm.financeDepartmentReviewer = this.reportOption.financeDepartmentReviewer;
        this.auditForm.militarySuppliesDepartmentReviewer = this.reportOption.militarySuppliesDepartmentReviewer;
        this.auditForm.basicLevelLeaderShip = this.reportOption.basicLevelLeaderShip;
        this.auditForm.messOfficer = this.reportOption.messOfficer;
        this.auditForm.informant = this.reportOption.informant;
        this.reportingUnit = this.reportOption.reportingUnit
          ? this.reportOption.reportingUnit
          : this.reportOption.unitInfo.unitName;
        this.region = this.reportOption.region ? this.reportOption.region : "1";
        this.createTime = this.reportOption.updateTime
          ? this.reportOption.updateTime
          : new Date().Format("yyyy-MM-dd");
        this.totleAmount = this.getTotal(
          this.reportOption.basMealExpensesStandardList
        );
        },500)
     
      },
      immediate: true
    }
  },
  computed: {
    dateTitle() {
      return new Date(this.dateSelect).Format("yyyy年MM月");
    }
  },
  mounted() {
    console.log(this.reportOption,'监听zzz数据');
  },
  methods: {
    saveData(date) {
      this.reportOption.financeDepartmentReviewer = this.auditForm.financeDepartmentReviewer;
      this.reportOption.militarySuppliesDepartmentReviewer = this.auditForm.militarySuppliesDepartmentReviewer;
      this.reportOption.basicLevelLeaderShip = this.auditForm.basicLevelLeaderShip;
      this.reportOption.messOfficer = this.auditForm.messOfficer;
      this.reportOption.informant = this.auditForm.informant;
      this.reportOption.reportingUnit = this.reportingUnit;
      this.reportOption.region = this.region;
      this.reportOption.applyYearMonth = new Date(date).Format("yyyy-MM");
      this.reportOption.createTime = this.createTime;
      this.reportOption.cateringFieldOne = this.tableOption[39][1].value
        ? this.tableOption[39][1].value
        : "";
      this.reportOption.cateringFieldTwo = this.tableOption[40][0].value
        ? this.tableOption[40][0].value
        : "";
      saveMealsApply(this.reportOption).then(res => {
        if (res.retCode == 2000) {
          this.$Message.success("保存成功");
          this.$emit("freshData", date);
        } else {
          this.$Message.error(res.retMsg);
        }
      });
    },
    reportExpense(date) {
      this.reportOption.financeDepartmentReviewer = this.auditForm.financeDepartmentReviewer;
      this.reportOption.militarySuppliesDepartmentReviewer = this.auditForm.militarySuppliesDepartmentReviewer;
      this.reportOption.basicLevelLeaderShip = this.auditForm.basicLevelLeaderShip;
      this.reportOption.messOfficer = this.auditForm.messOfficer;
      this.reportOption.informant = this.auditForm.informant;
      this.reportOption.reportingUnit = this.reportingUnit;
      this.reportOption.region = this.region;
      this.reportOption.applyYearMonth = new Date(date).Format("yyyy-MM");
      this.reportOption.createTime = this.createTime;
      this.reportOption.cateringFieldOne = this.tableOption[39][1].value
        ? this.tableOption[39][1].value
        : "";
      this.reportOption.cateringFieldTwo = this.tableOption[40][0].value
        ? this.tableOption[40][0].value
        : "";
      reportMonthMealApply(this.reportOption).then(res => {
        if (res.retCode == 2000) {
          this.$Message.success("上报成功");
        } else {
          this.$Message.error(res.retMsg);
        }
      });
    },
    getTotal(listData) {
      let totleAmount;
      totleAmount = listData.reduce(function(prev, cur, index, listData) {
        return (
          prev +
          (cur.volunteerAndSupplyStandard * cur.volunteerAndSupplyStrength +
            cur.otherPersonnelEnjoyingMealStandard *
              cur.otherPersonnelEnjoyingMealStrength)
        );
      }, 0);
      return (totleAmount.toFixed(2) + "").replace(
        /\B(?=(\d{3})+(?!\d))/g,
        ","
      );
    },
    changeInput() {
      this.totleAmount = this.getTotal(
        this.reportOption.basMealExpensesStandardList
      );
    }
  }
};
</script>
<style lang="less" scoped>
@import "../index.less";
</style>
